<template>
	<view class="public-category-group">
		<view class="left">
			<template v-if="listGroupCategory.length">
				<template v-for="(item,index) in listGroupCategory">
					<view
						class="for"
						:class="listGroupCategoryHover == index?'for hover':'for'"
						@click="clickGroupCategory(index,item.gid)">
						<view v-if="listGroupCategoryHover == index"></view>
						<text>{{item.gname}}</text>
					</view>
				</template>
			</template>
			<template v-else>
				<view class="for">
					<view></view>
					<text>loading...</text>
				</view>
			</template>
		</view>
		<view class="right">
			<template v-if="listGroupState == 'success'">
				<template v-for="item in listGroup">
					<view class="for" @click="$_To('group/group?gid='+item.gid)">
						<view class="group">
							<view class="cover" v-if="item.cover">
								<image :src="item.cover" mode="widthFix"></image>
							</view>
							<view class="group-info">
								<view class="gname">{{item.gname}}</view>
								<view class="post-comment">
									<text>{{item.postCount}}帖子</text><view></view><text>{{item.commentCount}}回复</text>
								</view>
							</view>
							<view class="follow-button">
								<view>详情</view>
							</view>
						</view>
						<view
							v-if="item.description"
							class="group-description">{{item.description}}</view>
					</view>
				</template>
			</template>
			<template v-if="listGroupState == 'loading'">
				<view class="loading loading-css"></view>
			</template>
			<template v-if="listGroupState == 'empty'">
				<public-empty></public-empty>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		name:"public-category-group",
		data() {
			return {
				listGroupCategory:[],
				listGroupCategoryHover:0,
				listGroup:[],
				listGroupState:"loading",
			};
		},
		mounted(){
			// 获取小组分类
			this.getGroupCategory();
		},
		methods: {
			// 获取小组分类
			getGroupCategory(){
				this.$_Request(
					"GET","/api/v2/group/categories",{},
					(res) => {
						this.listGroupCategory = res.data.data.list;
						// 请求二级小组分类
						this.getGroupList();
					}
				)
			},
			// 点击，左侧一级分类导航
			clickGroupCategory(index,gid){
				this.listGroupCategoryHover = index;
				this.listGroupState = "loading";
				this.getGroupList(gid);
			},
			// 请求二级小组分类
			getGroupList(gid){
				this.$_Request(
					"GET","/api/v2/group/list",
					{
						"gid":gid?gid:this.listGroupCategory[0].gid
					},
					(res) => {
						if(res.data.data.list.length){
							this.listGroup = res.data.data.list;
							this.listGroupState = "success"
						}else{
							this.listGroupState = "empty"
						}
					}
				)
			}
		}
	}
</script>

<style lang="scss" scoped>
.public-category-group{
	display: flex;
	.left{
		width: 200rpx;
		background: $BeiJingSe;
		flex-shrink: 0;
		position: relative;
		.for{
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			line-height: 28rpx;
			height: 100rpx;
			text{
				font-size: 28rpx;
				padding: 0 15rpx;
			}
		}
		.hover{
			background: #FFF;
			view{
				width: 10rpx;
				height: 28rpx;
				background: $LanSe;
				position: absolute;
				left: 0;
				top: 36rpx;
			}
			text{
				font-weight: bold;
			}
		}
	}
	.right{
		flex: 1;
		.for{
			border-bottom: 1rpx solid $BianKuangSe;
			margin: 25rpx;
			padding-bottom: 25rpx;
			.group{
				display: flex;
				.cover{
					width: 90rpx;
					height: 90rpx;
					overflow: hidden;
					flex-shrink: 0;
					border-radius: 15rpx;
					margin-right: 20rpx;
				}
				.group-info{
					flex: 1;
					display: flex;
					justify-content: center;
					flex-flow: column;
					.gname{
						font-size: 32rpx;
						line-height: 32rpx;
						font-weight: bold;
						margin-bottom: 15rpx;
						display: -webkit-box;
						/*!autoprefixer:off*/
						-webkit-box-orient: vertical;
						/*autoprefixer:on*/
						-webkit-line-clamp: 1;
						overflow: hidden;
					}
					.post-comment{
						display: flex;
						align-items: center;
						line-height: 28rpx;
						text{
							font-size: 28rpx;
							color: $ZhanWeiSe;
						}
						view{
							width: 1rpx;
							height: 25rpx;
							background: $ZhanWeiSe;
							margin: 0 15rpx;
						}
					}
				}
				.follow-button{
					height: 90rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					view{
						font-size: 22rpx;
						line-height: 22rpx;
						border: 1rpx solid $BianKuangSe;
						padding: 12rpx 15rpx;
						border-radius: 5rpx;
					}
				}
			}
			.group-description{
				margin-top: 25rpx;
				background: $BeiJingSe;
				font-size: 28rpx;
				line-height: 40rpx;
				color: $ZhanWeiSe;
				padding: 15rpx;
				border-radius: 10rpx;
			}
		}
		.for:last-child{
			border-bottom: 0;
			padding-bottom: 0;
			margin-bottom: 0;
		}
		.loading{
			width: 100%;
			height: 100rpx;
			margin: 25rpx;
		}
	}
}
</style>